<template>
  <div class="container">
    <NavTitle />
    <swiper ref="mySwiper" :options="option" class="home-medical-box">
      <swiper-slide>
        <div class="swiper-main">
          <div class="swiper-content-box">
            <div class="content-box-left">
              <h5 class="content-h5">智能营销服务</h5>
              <p class="content-word1">帮助品牌精准占据家庭流量入口</p>
              <p class="content-word1">引领新电视新营销趋势</p>
            </div>
            <div class="content-box-right">
              <swiper>
                <swiper-slide>
                  <div class="video-box">
                    <video width="640" height="360" controls>
                      <source src="https://ad-recording-screen-1257934856.cos.ap-beijing.myqcloud.com/project/ad-operation-manager/2024-04-15/65412fdce5fa49c0a0b1a109af23bb45/b633c6d0a99f8684f9a6d99ef754ffba.mp4" type="video/mp4" />
                    </video>
                  </div>
                </swiper-slide>
                <!-- <swiper-slide>
                  <div class="video-box">
                    <video src="~/static/2.mp4"></video>
                  </div>
                </swiper-slide>
                <swiper-slide>
                  <div class="video-box">
                    <video src="~/static/3.mp4"></video>
                  </div>
                </swiper-slide>
                <swiper-slide>
                  <div class="video-box">
                    <video src="~/static/4.mp4"></video>
                  </div>
                </swiper-slide>
                <swiper-slide>
                  <div class="video-box">
                    <video src="~/static/5.mp4"></video>
                  </div>
                </swiper-slide> -->
              </swiper>
            </div>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <swiper-slide>Slide 6</swiper-slide>
      <swiper-slide>Slide 7</swiper-slide>
      <swiper-slide>Slide 8</swiper-slide>
      <swiper-slide>Slide 9</swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  name: "IndexPage",
  data() {
    return {
      option: {
        slidesPerView: 1,
        spaceBetween: 30,
        direction: "vertical",
        centeredSlides: true, //居中显示
        loopFillGroupWithBlank: true,
        loop: true, //循环
        mousewheel: true,
        height: process.client ? window.innerHeight : "auto",
        initialSlide: 0, //初始索引
        on: {
          click: () => {
            console.log("点击");
            // 获取点击的索引.
            let swiper = this.$refs.mySwiper.$swiper;
            // 此处可自定义点击事件,注意此处this指向swiper,定义_this
            this.handleClickSwiper(swiper.realIndex);
          },
          init: () => {
            this.getProcessingTask(); // 页面加载时发起接口请求（这个方法也可以写在created钩子函数）
          },
          // 使用es6的箭头函数，使this指向vue对象（这段代码是重点，必须按照此方式写才可以调用到 this.getCurrentTaskList（）方法
          slideChange: () => {
            // 通过$refs获取对应的swiper对象
            let swiper = this.$refs.mySwiper.$swiper;
            console.log("realIndex", swiper.realIndex);
            this.getCurrentTaskList(swiper.realIndex);
          },
        },
      },
    };
  },
  components: {},
  methods: {
    // 初始化调用
    getProcessingTask() {
      console.log("初始化调用");
    },
    // 改变后调用
    getCurrentTaskList(realIndex) {
      console.log("改变后调用", realIndex);
    },
    // 点击事件
    handleClickSwiper(realIndex) {
      console.log("点击事件", realIndex); //  获取到当前展示项的数据
    },
    handleMenuClick(e) {
      console.log("点击", e);
    },
  },
};
</script>

<style>
body {
  background: rgba(0, 0, 0, 0.7);
}
.container .swiper-container {
  width: 100%;
  height: 100%;
}
.container .swiper-slide {
  width: 100%;
}
.logo {
  width: 200px;
  height: 50px;
}
.swiper-head-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 30px;
  background: #000;
}
.swiper-main {
  width: 1200px;
  margin: 0 auto;
}
.swiper-content-box {
  margin-top: 50px;
}
.swiper-content-box .content-h5 {
  font-size: 20px;
  color: orange;
}
.swiper-content-box .content-word1 {
  color: #fff;
  font-size: 14px;
}
.ant-menu-item {
  background: #000 !important;
  color: #fff;
  margin: 0 !important;
  padding: 0 20px !important;
}
.ant-menu-item.ant-menu-item-selected {
  background: #000 !important;
  color: #fff;
}
.ant-menu-horizontal > .ant-menu-item:hover {
  background: #000 !important;
  color: #fff;
  border-bottom: 2px solid #fff;
}
.ant-menu-submenu.ant-menu-submenu-horizontal {
  background: #000 !important;
  color: #fff;
}
.ant-menu-horizontal > .ant-menu-submenu:hover {
  background: #000 !important;
  color: #fff;
  border-bottom: 2px solid #fff;
}
.ant-menu-horizontal > .ant-menu-item-selected {
  background: #000 !important;
  color: #fff;
  border-bottom: 2px solid #fff;
}
.ant-menu-submenu-title:hover {
  color: #fff;
}
.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
.ant-menu-submenu-active {
  color: #fff;
}
.ant-menu-horizontal > .ant-menu-submenu-open,
.ant-menu-horizontal > .ant-menu-submenu-selected,
.ant-menu-horizontal > .ant-menu-submenu-active {
  border-bottom: 2px solid #fff;
}
.ant-menu-item.ant-menu-item-active {
  background: orange !important;
  color: #fff;
}
.ant-menu-item-group-title {
  display: none !important;
}
.content-box-left {
  width: 500px;
}
.swiper-content-box {
  display: flex;
  flex-direction: row;
}
.video-box {
  width: 600px;
  height: 400px;
}
</style>
